<template>
	<view class="add-address public345">
		<form @submit="formSubmit">
			<!-- 收货人 -->
			<view class="input-item">
				<view class="input-item-left">
					收货人
				</view>
				<view class="input-item-right">
					<input class="ipt" maxlength="6" placeholder="请输入收货人姓名" placeholder-class="placeholder-style"
						name="name" v-model="addressMessage.name">
					</input>
				</view>
			</view>

			<!-- 手机号码 -->
			<view class="input-item">
				<view class="input-item-left">
					手机号码
				</view>
				<view class="input-item-right">
					<input class="ipt" maxlength="11" placeholder="请输入手机号码" placeholder-class="placeholder-style"
						name="phone" v-model="addressMessage.phone">
					</input>
				</view>
			</view>

			<!-- 选择所在地址 -->
			<view class="input-item dropdown">
				<view class="input-item-left">
					所在地区
				</view>
				<view class="input-item-right">
					<input class="ipt" placeholder="请选择省市区" placeholder-class="placeholder-style" name="adrFirst"
						v-model="addressMessage.adrFirst" disabled>
					</input>
					<PublicAddress @region="resgclick">
						<uni-icons type="forward" size="16"></uni-icons>
					</PublicAddress>
				</view>
			</view>

			<!-- 详细地址 -->
			<view class="input-item">
				<view class="input-item-left">
					详细地址
				</view>
				<view class="input-item-right">
					<textarea class="text-area-box" maxlength="40" placeholder="请输入详细地址"
						placeholder-class="placeholder-style" name="adrLast" v-model="addressMessage.adrLast">
					</textarea>
				</view>
			</view>

			<!-- 设置为默认地址 -->
			<view class="set-default-adr">
				<text>设为默认地址</text>
				<switch name="isFirst" color="#FF7803" :checked="addressMessage.isFirst"></switch>
			</view>

			<!-- 底部保存按钮 -->
			<view class="bottom-btn">
				<button class="adr-bottom-keep" form-type="submit">保存</button>
			</view>
		</form>
	</view>
</template>

<script>
	// 导入三级地址组件
	import PublicAddress from '../../components/address/PublicAddress.vue'
	export default {
		data() {
			return {
				addressMessage: {
					id: null,
					name: null,
					phone: null,
					isFirst: null,
					adrFirst: null,
					adrLast: null,
				}
			}
		},
		onLoad(e) {
			if (e.item) {
				// 修改地址
				// console.log(JSON.parse(e.item))
				this.addressMessage = JSON.parse(e.item)
				uni.setNavigationBarTitle({
					title: '修改地址'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '新建地址'
				})
			}
		},
		methods: {
			// 城市地址
			resgclick(v) {
				this.addressMessage.adrFirst = v
			},
			// 保存地址
			formSubmit(e) {
				console.log('保存', e.target.value)
			}
		},
		components: {
			PublicAddress
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.add-address {

		.input-item {
			display: flex;
			font-size: 26rpx;
			color: #333;

			.input-item-left {
				width: 180rpx;
				line-height: 94rpx;
			}

			.input-item-right {
				width: 510rpx;

				/deep/ .placeholder-style {
					font-size: 26rpx;
					color: #D0D0D0;
				}

				.ipt {
					height: 94rpx;
					font-size: 26rpx;
				}

				.text-area-box {
					display: inline-block;
					width: 460rpx;
					height: 120rpx;
					padding-top: 28rpx;
					font-size: 26rpx;
					line-height: 40rpx;
					word-break: break-all;
				}
			}
		}

		// 所在地区右侧箭头
		.dropdown .input-item-right {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.bottom-btn {
			position: fixed;
			bottom: 0;

			// 小程序 底部
			// 兼容 IOS 11.2 以下
			// padding-bottom: constant(safe-area-inset-bottom);
			// 兼容 IOS 11.2 以上
			// padding-bottom: env(safe-area-inset-bottom);

			// 预设一个高度
			padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

			.adr-bottom-keep {
				width: 690rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				background: #FF7803;
				font-size: 28rpx;
				color: #fff;
			}
		}

		.set-default-adr {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			font-size: 26rpx;
			line-height: 60rpx;
		}
	}
</style>